<template>
	<view class="content">
		<view class="manage_title flex_layout">
			<view class="manage_item" :class="tab==-1?'avtive':''" data-index="-1" @click="clickTab">全部</view>
			<view class="manage_item" :class="tab==0?'avtive':''" data-index="0" @click="clickTab">待确认</view>
			<view class="manage_item" :class="tab==1?'avtive':''" data-index="1" @click="clickTab">已授权</view>
			<view class="manage_item" :class="tab==2?'avtive':''" data-index="2" @click="clickTab">已拒绝</view>
		</view>
		<view class="personnel" v-if="isshow">
		 
			<view class="personnel_title flex_layout">
				<text>姓名</text>
				<text>申请时间</text>
				<text>状态</text>
				<text>授权操作</text>
			</view>
		<block v-if="myClinicStaff.length>0">
			<view class="personnel_item flex_layout"  v-for="(item,index) in myClinicStaff" :key="index">
				<text>{{item.nametext}}</text>
				<text>{{item.createtime}}</text>
				<text v-if="item.authorizedata==0">等待授权</text>
				<text v-if="item.authorizedata==1">已授权</text>
				<text v-if="item.authorizedata==2">已拒绝</text>
				<button class="personnel_btn1" v-if="item.authorizedata==0" :data-id="item.id" :data-index="index" :data-auth="item.authorizedata"  :data-name="item.nametext" @click="examine">审核</button>
				<button class="personnel_btn1" v-if="item.authorizedata==1" :data-id="item.id" :data-index="index"  :data-auth="item.authorizedata"  :data-name="item.nametext" @click="examine">取消</button>
				<button class="personnel_btn1" v-if="item.authorizedata==2" :data-id="item.id" :data-index="index"  :data-auth="item.authorizedata"  :data-name="item.nametext" @click="examine">删除</button>
			</view>
			
			</block>
			<block v-else>
				<view class="personnel_item flex_layout">
						<view class="noResult">暂无数据</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var _this;var page=1;var reachbottom = false;
	export default {
		data() {
			return {
				tab:-1,
				myClinicStaff:[],
				isshow:false,
				limit:10,
				auth:''
				
			}
		},
		onLoad(options) {
			this.clinic_id=options.clinic_id;
			if(!options.clinic_id){
				this.$common.errorToShow('门店id为空，请返回重试',function(){
					this.$common.navigateBack();
				})	
			}
		},
		mounted() {
			_this= this;
		},
		onShow() {
			page=1
			reachbottom=false;
			this.myClinicStaff=[];
			this.clinicStaff();
		},
		// 加载更多
		onReachBottom: function() {
			if (!reachbottom) {
				console.log("reachbottom: ",reachbottom);
				this.clinicStaff();
			}
		},
		methods: {
			clickTab: function(e){
				var index=e.currentTarget.dataset.index;
				this.tab=index
				page=1;
				console.log("this.auth: ",this.auth);
				reachbottom=false;
				this.myClinicStaff=[];
				this.clinicStaff();
			},
			examine: function(e){
				var id=e.currentTarget.dataset.id;
				var index=e.currentTarget.dataset.index;
				var auth=e.currentTarget.dataset.auth;
				var name=e.currentTarget.dataset.name;
				//0 等待授权，1已授权，2 拒绝授权
				if(auth==0){
					 this.$common.modelShow('审核提示','确认'+name +'加入门店员工？',function(){
						 //同意
						 _this.verifyStaff(id,1,index);
					 },function(){
						 //拒绝
						 _this.verifyStaff(id,2,index);
					 })	
				}
				if(auth==1){
					//通过后取消
					this.$common.modelShow('审核提示','确认拒绝'+name +'加入门店员工？',function(){
					 //同意
					 _this.verifyStaff(id,2,index);
					},function(){},true,'不取消','确认取消')
				}
				if(auth==2){
					//拒绝后删除
					this.$common.modelShow('删除提示','确认删除'+name +'加入门店员工的记录？',function(){
					 //同意
					 _this.verifyStaff(id,3,index);
					},function(){},true,'取消','确认删除')
					
				}
			},
			//获取员工列表数据
			clinicStaff:function(){
				var that=this;
				this.$api.getClinicStaff(
				{
					clinic_id:that.clinic_id,
					authorizedata:that.tab,
					page:page,
					limit:that.limit},
					res => {
						console.log(res)
						if(page==1){
						 this.isshow=true;	
						}
						if (res.code == 1) {
							var pageClinicStaff = res.data;
							var number=res.data.length; 
							page++;
							uni.stopPullDownRefresh();
							if (number == 0) {
								reachbottom = true
								uni.showToast({
									"title": "已经加载全部",
									icon: "none",
									duration: 1000
								});
							} else {
								console.log(pageClinicStaff);
								that.myClinicStaff = that.myClinicStaff.concat(pageClinicStaff);
							}
						}
						if (res.code == 0) {
							that.$common.errorToShow(res.msg,function(){
								that.$common.navigateBack();
							})
						}
					}
				)
			},
			//test 接口
			//获取优惠券数量
			verifyStaff:function(id,status,index){
				console.log("status: ",status);
				var that=this;
				this.$api.getverifyStaff(
				{id:id,status:status,clinic_id:that.clinic_id},
					res => {
						console.log(res)
						if (res.code == 1) {
							that.$common.successToShow(res.msg);
							if(status==3){
								that.myClinicStaff.splice(index,1);
								console.log("that.myClinicStaff: ",that.myClinicStaff);
							}else{
							 that.myClinicStaff[index]['authorizedata']=status;	
							}
							
						}
						if (res.code == 0) {
							that.$common.errorToShow(res.msg,function(){
								//that.$common.navigateBack();
							})
						}
					}
				)
			},
		}
	}	
</script>
<style>
	@import url('../../common/common.css');
	page{background: #f8f8f8;}
	.manage_title{justify-content: space-between; padding: 0 30upx; background: #fff; border-top: 1px solid #f8f8f8;}
	.manage_item{padding: 30upx 0; color: #333333; font-size: 30upx;}
	.manage_title .avtive{color: #2562a1;}
	.personnel{padding: 30upx;}
	.personnel_title{padding: 30upx; background: #fff; justify-content: space-between; border-bottom: 1px solid #f8f8f8;}
	.personnel_title text{color: #333; font-size: 24upx;}
	.personnel_item{justify-content: space-between; color: #666; font-size: 24upx; padding: 30upx; border-bottom: 1px solid #f8f8f8;}
	.personnel_item text{color: #666; font-size: 24upx;}
	.personnel_item text.delete{color: #ff4949;}
	.personnel_item:nth-of-type(even){background: #fff;}
	.personnel_item button{margin: 0; padding: 0; width: 100upx; height: 36upx; font-size: 22upx; line-height: 36upx; border-radius: 36upx;}
	.personnel_item button.personnel_btn1{background: #2562a1; color: #fff;}
	.personnel_item button.personnel_btn2{color: #2562a1; border: 1px solid #2562a1; background: none;}
	.noResult{padding: 30upx; font-size: 26upx; text-align: center; color: #ccc; margin: 0 auto;}
</style>
